<template>
  <section class="sustainability-screen">
    <h2 class="section-title">可持续性实践</h2>

    <div class="screen-frame">
      <div
        v-for="(item, i) in posts"
        :key="i"
        class="screen-card"
        :class="{ active: hovered === i, shifted: hovered !== null && hovered !== i }"
        :style="cardStyle(i)"
        @mouseenter="hovered = i"
        @mouseleave="hovered = null"
      >
        <div class="card-overlay">
          <h3 class="short">{{ item.title }}</h3>
          <transition name="fade">
            <div v-if="hovered === i" class="expand">
              <p class="desc">{{ item.description }}</p>
              <button class="read-btn">了解更多</button>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const hovered = ref(null)

const posts = [
  {
    title: '咖啡渣再利用',
    description: '我们将废弃咖啡渣转化为有机肥、除湿包等绿色产品。',
    image: '/mock-bg2.jpg'
  },
  {
    title: '门店回收倡议',
    description: '推行可重复使用杯具、纸杯回收积分等环保计划。',
    image: '/mock-bg.jpg'
  },
  {
    title: '绿色原产合作',
    description: '与产地农场建立长期碳中和伙伴关系，共建可持续链路。',
    image: '/mock-bg2.jpg'
  },
  {
    title: '绿色原产合作',
    description: '与产地农场建立长期碳中和伙伴关系，共建可持续链路。',
    image: '/mock-bg2.jpg'
  },
  {
    title: '绿色原产合作',
    description: '与产地农场建立长期碳中和伙伴关系，共建可持续链路。',
    image: '/mock-bg2.jpg'
  }
]

function cardStyle(i) {
  const baseWidth = hovered.value === i ? '100%' : '30%'
  const z = hovered.value === i ? 10 : i
  return {
    width: baseWidth,
    backgroundImage: `url(${posts[i].image})`,
    zIndex: z
  }
}
</script>

<style scoped>
.sustainability-screen {
  padding: 80px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.section-title {
  font-size: 32px;
  font-weight: 600;
  color: #4a2e18;
  letter-spacing: 1px;
  margin-bottom: 60px;
  position: relative;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #c19a6b, #ffb46a);
  border-radius: 2px;
  opacity: 0.8;
}

.screen-frame {
  width: 1000px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  height: 360px;
}

.screen-card {
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  position: relative;
  margin: 0 -40px; /* 叠加感 */
  transition: all 0.4s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.screen-card.shifted {
  transform: scale(0.94);
  filter: brightness(0.7);
}

.card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%);
  color: #fff;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.short {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.expand {
  animation: fadeUp 0.3s ease-out;
}
.desc {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.read-btn {
  background: linear-gradient(to right, #ffb46a, #c19a6b);
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}
.read-btn:hover {
  opacity: 0.9;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 移动端横滑（可选优化） */
@media (max-width: 768px) {
  .screen-frame {
    overflow-x: hidden;
    flex-wrap: nowrap;
    height: auto;
  }
  .screen-card {
    min-width: 240px;
    margin: 0 10px;
    flex: 0 0 auto;
  }
}
</style>
